<script setup>
import { inject, ref, onMounted, onBeforeUnmount } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import { Search } from '@element-plus/icons-vue'
import SvgIcon from '@/components/svg-icon/index.vue'
import { getHelper } from '@/utils/map/index.js'
import mitter from '@/utils/eventBus'

let measure, _viewer, _layerManager

const mapId = inject('mapId')

defineProps({
  isExpanded: Boolean,
})
let name = ref('')
let carNo = ref('')

let visitorTable = ref([
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    name: '张三',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
])

let visitorCarTable = ref([
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },

  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
  {
    carNo: '渝A·88888',
    dept: '重庆xxxxxxxxx公司',
    inTime: '09-19 10:12:12',
    outTime: '09-19 10:12:12',
  },
])

const showRightTrajectory = () => {
  mitter.emit('trajectory', true)
}
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="访客出入记录" class="visitor-list">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="top-input">
        <el-input
          v-model="name"
          placeholder="请输入人员姓名"
          :prefix-icon="Search"
        />
      </div>
      <div class="visitor-table">
        <el-table
          class="visitor-table-table"
          :data="visitorTable"
          height="100%"
        >
          <el-table-column prop="name" label="人员姓名" align="center">
            <template #default="scope">
              <el-popover
                placement="bottom"
                trigger="hover"
                :show-arrow="false"
                popper-class="visitor-infos-left"
              >
                <template #reference>
                  <span
                    @click="showRightTrajectory"
                    style="color: #fab54f"
                    class="m-2"
                    >{{ scope.row.name }}</span
                  >
                </template>
                <div class="visitor-info">
                  <div class="visitor-info-left">
                    <img src="../../../../assets/imgs/img_tx.png" />
                  </div>
                  <div class="visitor-info-right">
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name name">
                        张子义
                      </div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">联系方式：</div>
                      <div class="visitor-info-right-line-value">
                        183 2654 1234
                      </div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">身份证号：</div>
                      <div class="visitor-info-right-line-value">
                        500111199810154567
                      </div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">车牌号码：</div>
                      <div class="visitor-info-right-line-value">渝A·88888</div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">访客单位：</div>
                      <div class="visitor-info-right-line-value">
                        XXXXXX公司
                      </div>
                    </div>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="dept"
            label="访客单位"
            align="center"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="inTime"
            label="入园时间"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="outTime"
            label="出园时间"
            align="center"
            width="120"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span v-if="scope.row.outTime">{{ scope.row.outTime }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </card>
    <card name="访客出入记录" class="visitor-car-list">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="top-input">
        <el-input
          v-model="carNo"
          placeholder="请输入车牌号"
          :prefix-icon="Search"
        />
      </div>
      <div class="visitor-table">
        <el-table
          class="visitor-table-table"
          :data="visitorCarTable"
          height="100%"
        >
          <el-table-column prop="carNo" label="车牌号码" align="center">
            <template #default="scope">
              <el-popover
                placement="top"
                trigger="hover"
                :show-arrow="false"
                popper-class="visitor-infos-top"
              >
                <template #reference>
                  <span style="color: #fab54f" class="m-2">{{
                    scope.row.carNo
                  }}</span>
                </template>
                <div class="visitor-info">
                  <div class="visitor-info-left">
                    <img src="../../../../assets/imgs/img_tx.png" />
                  </div>
                  <div class="visitor-info-right">
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name name">
                        张子义
                      </div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">联系方式：</div>
                      <div class="visitor-info-right-line-value">
                        183 2654 1234
                      </div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">身份证号：</div>
                      <div class="visitor-info-right-line-value">
                        500111199810154567
                      </div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">车牌号码：</div>
                      <div class="visitor-info-right-line-value">渝A·88888</div>
                    </div>
                    <div class="visitor-info-right-line">
                      <div class="visitor-info-right-line-name">访客单位：</div>
                      <div class="visitor-info-right-line-value">
                        XXXXXX公司
                      </div>
                    </div>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="dept"
            label="访客单位"
            align="center"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="inTime"
            label="入园时间"
            align="center"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="outTime"
            label="出园时间"
            align="center"
            width="120"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span v-if="scope.row.outTime">{{ scope.row.outTime }}</span>
              <span v-else>--</span>
            </template></el-table-column
          >
        </el-table>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .visitor-table {
    height: calc(100% - 40px);

    :deep(.el-table) {
      background-color: transparent;
      color: #fff;

      tr {
        background-color: transparent;
      }

      th.el-table__cell {
        background-color: transparent;
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 14px;
        color: #c4eaff;
      }

      tbody tr:hover > td {
        background-color: transparent !important;
      }

      .el-table__cell {
        border-bottom: none;
      }

      .el-table__inner-wrapper::before {
        height: 0px;
      }

      .el-table__header-wrapper {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/list_top_visitor.png');
      }

      .el-table__body-wrapper {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url('@/assets/imgs/list_bottom_visitor.png');
        padding-bottom: 10px;

        .el-table__cell {
          border-bottom: 1px solid rgba($color: #657ca8, $alpha: 0.6);
          .m-2 {
            cursor: pointer;
          }
        }
      }
    }
  }

  .top-input {
    margin-bottom: 5px;
    padding: 5px;

    :deep(.el-input) {
      .el-input__wrapper {
        background-color: rgba(11, 36, 70, 0.65);
        border-radius: 18px;
        box-shadow: none;
        border: 1px solid #2889ff;

        .el-input__prefix {
          color: #c4eaff;
        }

        .el-input__inner {
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 12px;
          color: #c4eaff;
        }

        .el-input__inner::placeholder {
          color: #c4eaff;
        }
      }
    }
  }

  .visitor-list {
    height: 478px;
    margin-bottom: 20px;

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/fkcrjl_title.png');
    }
  }

  .visitor-car-list {
    height: 478px;

    .title-icon {
      width: 162px;
      background-image: url('@/assets/imgs/fkclcrjl_title.png');
    }
  }
}
</style>
<style lang="scss">
.visitor-infos-left {
  width: 370px !important;
  height: 175px !important;
  line-height: 58px !important;
  text-align: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-image: url('@/assets/imgs/bubble_box_people.png') !important;
  color: #fff !important;
  padding: 0px !important;
  background-color: transparent !important;
  border: none !important;
  margin-top: -20px;
  margin-left: 30px;
  display: flex;
  justify-content: center;
  align-items: center;

  .visitor-info {
    height: 120px;
    display: flex;
    margin-top: 16px;
    margin-bottom: 20px;
    display: flex;

    &-left {
      width: 96px;

      img {
        height: 100%;
        width: 100%;
      }
    }

    &-right {
      flex: 1;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // background-image: url('@/assets/imgs/bg_fkxx.png');
      padding-left: 10px;

      &-line {
        display: flex;
        align-items: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        height: 26px;
        justify-content: flex-start;

        &-name {
          color: #c4eaff;
          margin-left: 10px;
        }

        &-value {
          color: #ffffff;
          // flex: 1;
          justify-content: flex-start;
        }
      }

      .name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}
.visitor-infos-top {
  width: 370px !important;
  height: 175px !important;
  line-height: 58px !important;
  text-align: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-image: url('@/assets/imgs/img_qpk.png') !important;
  color: #fff !important;
  padding: 0px !important;
  background-color: transparent !important;
  border: none !important;
  margin-bottom: -20px;
  margin-left: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  .visitor-info {
    height: 120px;
    display: flex;
    margin-top: 16px;
    margin-bottom: 20px;
    display: flex;

    &-left {
      width: 96px;

      img {
        height: 100%;
        width: 100%;
      }
    }

    &-right {
      flex: 1;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // background-image: url('@/assets/imgs/bg_fkxx.png');
      padding-left: 10px;

      &-line {
        display: flex;
        align-items: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        height: 26px;
        justify-content: flex-start;

        &-name {
          color: #c4eaff;
          margin-left: 10px;
        }

        &-value {
          color: #ffffff;
          // flex: 1;
          justify-content: flex-start;
        }
      }

      .name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}
</style>
